<template>
    <div class="role">
        <div class="header">
            <span class="role-text">角色</span>
            <el-button link @click="OpenIt?.open">+新增角色</el-button>
        </div>

        <div>
            <div class="role-data" v-for="item in queryRoleData" :key="item._id" @click="selectRoleId(item._id)"
                :class="{ 'Click-Style': selectedId === item._id }">
                <span class="itemName">{{ item.name }}</span>
                <div class="icon">
                    <!-- 修改 -->
                    <el-icon class="update" @click="OpenIt?.open(item)">
                        <Edit />
                    </el-icon>
                    <!-- 删除 -->
                    <el-icon class="delete" @click="DeleteRole(item._id)" @getRoleData="getRoleData()">
                        <Delete />
                    </el-icon>
                </div>
            </div>
        </div>
    </div>
    <AddRole ref="OpenIt" @getRoleData="getRoleData" />
</template>

<script setup>
import { onMounted, ref, useTemplateRef } from 'vue';
import { deleteRoleApi, queryRoleApi } from '../../api/RoleManagement';
import AddRole from './addRole.vue';
import { Delete, Edit } from '@element-plus/icons-vue';
import { defaultNamespace } from 'element-plus';

const queryRoleData = ref()
const selectedId = ref('')
const OpenIt = useTemplateRef("OpenIt")

const selectRole = defineModel('selectRoleId')

//添加和编辑的数据
const addRoleData = ref({})

const selectRoleId = (id) => {
    selectedId.value = id;
    selectRole.value = id
}
//传递选中的id
const emit = defineEmits(['selectRoleId']);


onMounted(() => {
    getRoleData()
})


function getRoleData() {
    queryRoleApi().then((res) => {
        if (res.code == 200) {
            queryRoleData.value = res.data.rows
        }
    })
}



function DeleteRole(_id) {
    ElMessageBox.confirm(
        '确定要删除分组吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        deleteRoleApi({ _id }).then((res) => {
            if (res.code) {
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                }, getRoleData())
            }
        })
    })

}




</script>

<style scoped>
.role-text {
    font-weight: 550;
}

.header {
    display: flex;
    justify-content: space-between;
    padding: 15px 20px 0px 20px;

    span {
        font-size: 16px;
        color: rgba(51, 51, 51, 0.898039215686275);

    }

    .el-button {
        font-size: 13px;
        color: #2984F8;
        ;
    }
}


.role {
    width: 300px;
    /* height: 600px; */
    border: 1px solid rgba(242, 242, 242, 1);
    /* padding: 20px; */

    .role-data {
        width: 100%;
        font-size: 13px;
        display: flex;
        align-items: center;
        margin-top: 10px;
        justify-content: space-between;
        flex-wrap: wrap;
    }
}

.role-data:hover .icon {
    display: block;

}

.role-data:hover {
    background-color: rgba(242, 247, 251, 1);
}

.itemName {
    padding: 20px;
    display: flex;
    text-align: center;
}

.Click-Style {
    background-color: rgba(242, 247, 251, 1);
}

.icon {
    display: none;
    width: 50px;
}

.update {
    color: #2984F8;
    margin-right: 5px;
}

.delete {
    color: red;
    margin-left: 5px;
}
</style>